<template>
  <div>
    <!-- 拨打按钮 -->
    <div v-if="nowcalltype==''||
    ((nowcalltype=='cloud'||nowcalltype=='mobile'||nowcalltype=='cloud2'||nowcalltype=='cloud3'||nowcalltype=='cloud4')&&hujiaozhuangtai.status_name!='呼叫中'&&hujiaozhuangtai.status_name!='接听中')" 
    class="t_wh_btn_all" style="margin-bottom: 10px;">
      
        <div v-if="dianxinshebie" @click="call('cloud')" class="t_wh_btn_numall t_wh_btn1">专线1(LJ电信) <img src="../../../../static/img/wh111.png"
        class="t_wh_btn_img" ></div>
        <div v-else class="t_wh_btn_numall t_wh_btn0" @click="noup(1)">专线1(LJ电信) <img src="../../../../static/img/wh11.png"
        class="t_wh_btn_img" ></div>

        <!-- <div v-if="dianxinshebie" @click="call('cloud2')" class="t_wh_btn_numall t_wh_btn1">专线2 <img src="../../../../static/img/wh111.png"
        class="t_wh_btn_img" ></div>
        <div v-else class="t_wh_btn_numall t_wh_btn0" @click="noup(1)">专线2 <img src="../../../../static/img/wh11.png"
        class="t_wh_btn_img" ></div> -->

        <div v-if="dianxinshebie" @click="call('cloud3')" class="t_wh_btn_numall t_wh_btn1">专线2(BJ联通) <img src="../../../../static/img/wh111.png"
        class="t_wh_btn_img" ></div>
        <div v-else class="t_wh_btn_numall t_wh_btn0" @click="noup(1)">专线2(BJ联通) <img src="../../../../static/img/wh11.png"
        class="t_wh_btn_img" ></div>

        <div v-if="dianxinshebie" @click="call('cloud4')" class="t_wh_btn_numall t_wh_btn1">专线3(CQ联通) <img src="../../../../static/img/wh111.png"
        class="t_wh_btn_img" ></div>
        <div v-else class="t_wh_btn_numall t_wh_btn0" @click="noup(1)">专线3(CQ联通) <img src="../../../../static/img/wh11.png"
        class="t_wh_btn_img" ></div>



        <div v-if="shoujishebie" @click="call('mobile')" class="t_wh_btn_numall t_wh_btn2" >手机 <img src="../../../../static/img/wh222.png"
        class="t_wh_btn_img" ></div>
        <div v-else @click="noup(2)" class="t_wh_btn_numall t_wh_btn0">手机 <img src="../../../../static/img/wh22.png"
        class="t_wh_btn_img" ></div>



        <div @click="call('yidong')" class="t_wh_btn_numall t_wh_btn3">线下固话 <img src="../../../../static/img/wh333.png"
        class="t_wh_btn_img" ></div>
      
    </div>
    <!-- 固话接通 -->
    <div v-if="nowcalltype=='yidong'" class="t_on_gu">
      <div class="t_yidong_tips">线下电话联系中...</div>
      <el-button @click="biaoji(1)" style="background-color: #2974FF;" type="danger" round>标记未接通</el-button>
      <el-button @click="biaoji(2)" style="background-color: #EEF7FF;" type="primary" round>标记已接通</el-button>

    </div>
    <!-- 手机接通 -->
    <div v-if="(nowcalltype=='cloud'||nowcalltype=='mobile'||nowcalltype=='cloud2'||nowcalltype=='cloud3'||nowcalltype=='cloud4')&&(hujiaozhuangtai.status_name=='呼叫中'||hujiaozhuangtai.status_name=='接听中')" class="t_on_phone">
      <div class="t_phone_tips">手机拨打中...</div>
      <el-button @click="phonedown" style="background-color: #2974FF;" type="danger" round>挂断</el-button>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="isshownotips"
      width="377px">
      <div v-if="tipstype==1">
        <div class="t_tips_dig">
          <i class="el-icon-warning" style="font-size: 20px;color: #fb9c02;margin-right: 10px;"></i>
          <div style="width: 400px;">
            <div>未检测到电信云中继专线，当前无法使用</div>
            <div style="margin-top: 10px;">您可联系客服咨询开通专线流程或报障</div>
          </div>
        </div>

        <div style="text-align: center;margin-top: 40px;">
          <el-button round type="danger" style="background-color: #2974FF;" @click="isshownotips = false">关闭</el-button>
        </div>
      </div>
      <div v-if="tipstype==2">
        <div class="t_tips_dig">
          <i class="el-icon-warning" style="font-size: 20px;color: #fb9c02;margin-right: 10px;"></i>
          <div style="width: 400px;">
            <div>未检测当前敢探号账号登录的手机App设备</div>
            <div style="margin-top: 10px;">请先在手机端安装APP并登录当前敢探号账号</div>
          </div>
        </div>
        <div style="text-align: center;margin-top: 40px;">
          <el-button round type="danger" style="background-color: #2974FF;" @click="downapp">敢探号外呼手机APP下载</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";


  export default {
    components: {
     
    },
    name: 'callbtn',
    props:['dianxinshebie','shoujishebie','number','task_order_id','nowcall','ws','hujiaozhuangtai','choosefkobj'],
    data() {
      return {
        tipstype:'',
        isshownotips:false,
        nowcalltype:'',
        log_id:''
      }
    },
    created() {
      
     
    },
    methods: {
      // 未连接
      noup(type){
        this.tipstype = type
        this.isshownotips = true
      },
      // 拨打
      call(val){

        if(this.choosefkobj.is_call_allowed==0){
          this.$message.error('该电话触发风控，无法拨打');
          return
        }

        //cloud==is_yzj_allowed
        //mobile==is_app_allowed
        //yidong==is_tel_allowed

        if(val=='cloud'&&this.choosefkobj.is_yzj_allowed==0){
          this.$message.error('此电话触发风控已禁用该拨打方式，请切换其他拨打');
          return
        }
        if(val=='mobile'&&this.choosefkobj.is_app_allowed==0){
          this.$message.error('此电话触发风控已禁用该拨打方式，请切换其他拨打');
          return
        }
        if(val=='yidong'&&this.choosefkobj.is_tel_allowed==0){
          this.$message.error('此电话触发风控已禁用该拨打方式，请切换其他拨打');
          return
        }


        if(val=='mobile'){
          axios.post("/api/plan-market/call/check/forweb", {task_order_id:this.task_order_id,mobile:this.number})
          .then((response)=> {
              if (response.data.msg.code == 0) {
                console.log('手机拨打')
                 console.log(response.data)
                 if(response.data.data.error){
                  this.$emit('called','')
                  this.$message.error(response.data.data.error);
                  return
                 }else{
                  this.startcall(val)
                 }
                 
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })
        }else{
          this.startcall(val)
        }

        
        
      },
      //开始拨打
      startcall(val){
        if(this.nowcall){
          this.$message.error('当前正在通话中');
          return
        }

        axios.post("/api/plan-market/call/detail/can/v2", {task_order_id:this.task_order_id,mobile:this.number})
        .then((response)=> {
            if (response.data.msg.code == 0) {
                // 拨打过，可以进行下一条
                this.nowcalltype = val
                this.$emit('called',val)
                this.log_id = response.data.data.log_id
                if(this.nowcalltype!='yidong'){
                  this.bodago()
                }
            }else{
                this.$message.error(response.data.msg.info);
            }
        })
      },
      // 标记未接通，已接通
      biaoji(type){
        axios.post("/api/plan-market/call/order/status/v2", {task_order_id:this.task_order_id,call_status:type})
        .then((response)=> {
            if (response.data.msg.code == 0) {
                // 挂断
                this.nowcalltype = ''
                this.$emit('closecall')
            }else{
                this.$message.error(response.data.msg.info);
            }
        })
      },
      
      //挂断
      phonedown(){
        // 挂断
        
        this.$emit('closecall')
        this.guaduan()
      },
   


      bodago:function(){
        let d = ""
        if(this.nowcalltype == 'mobile'){
          d = this.shoujishebie
        }
        if(this.nowcalltype == 'cloud'){
          d = this.dianxinshebie
        }
        if(this.nowcalltype == 'cloud2'){
          d = this.dianxinshebie
        }
        if(this.nowcalltype == 'cloud3'){
          d = this.dianxinshebie
        }
        if(this.nowcalltype == 'cloud4'){
          d = this.dianxinshebie
        }
        let obj = {
          type:"call_start",
          device_id:d,
          mobile:this.number,
          log_id:this.log_id,
          operation_type:"call_start",
          terminal:this.nowcalltype,
          tab:"call"
        }
        this.ws.send(JSON.stringify(obj));
      },


      guaduan:function(){
        let d = ""
        if(this.nowcalltype == 'mobile'){
          d = this.shoujishebie
        }
        if(this.nowcalltype == 'cloud'){
          d = this.dianxinshebie
        }
        if(this.nowcalltype == 'cloud2'){
          d = this.dianxinshebie
        }
        if(this.nowcalltype == 'cloud3'){
          d = this.dianxinshebie
        }
        if(this.nowcalltype == 'cloud4'){
          d = this.dianxinshebie
        }
        let obj = {
          type:"call_start",
          device_id:d,
          mobile:this.number,
          log_id:this.log_id,
          operation_type:"call_off",
          terminal:this.nowcalltype,
          tab:"call"
        }
        this.ws.send(JSON.stringify(obj));
        this.nowcalltype = ''
      },
      downapp(){
        this.isshownotips = false
        window.open('https://www.pgyer.com/oYgk0H','_blank')
      }
      
    },
    beforeDestroy(){
     
    },
    
    
  }
</script>

<style  scoped>
.t_wh_btn_numall{
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 8px 13px;
    justify-content: space-between;
    margin-right: 10px;
    cursor: pointer;
  }
  .t_wh_btn0{
    border: 1px solid #999999;
    background: #f9f9f9;
    color:#999999 ;
  }
  .t_wh_btn1{
    border: 1px solid #7b67ee;
    background: #f2f0fd;
    color:#7b67ee ;
  }
  .t_wh_btn2{
    border: 1px solid #00b97c;
    background: #e6f8f2;
    color:#00b97c ;
  }
  .t_wh_btn3{
    border: 1px solid #EEF7FF;
    background: #e8f6ff;;
    color:#EEF7FF ;
  }
  .t_wh_btn_img{
    width: 20px;
    margin-left: 6px;

  }
  .t_wh_btn_all{
    display: flex;
  }
  .t_tips_dig{
    display: flex;
  }
  .t_yidong_tips{
    font-size: 14px;
    color: #999999;
    margin-right: 15px;
  }
  .t_on_gu{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .t_on_phone{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .t_phone_tips{
    font-size: 14px;
    color: #2974FF;
    margin-right: 15px;
  }
</style>
